/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  ScrollView,
} from 'react-native';

import Screen from './HomeScreen.js'

export default class FMPlayerView extends Component {
  static navigationOptions = ({navigation}) => ({
    header:null,//隐藏顶部导航栏
  })

  constructor(props){
    super(props);
    this.state = {
      dataObject :{},
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  //取数据
  fetchData(){
    let programID = this.props.navigation.state.params.info.id;
    let requestUrl = 'http://yiapi.xinli001.com/fm/broadcast-detail-old.json?key=c0d28ec0954084b4426223366293d190&id=' + programID;
    let map = {
      method:'GET'
    }
    fetch(requestUrl, map)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
        var jsonData = responseData.data;

        if (jsonData.viewnum) {
          let num = parseInt(jsonData.viewnum);
          console.log(num);
          var newViewnum;
          if (num>10000) {
            var newNum = (num/10000).toFixed(1);
            newViewnum = '收听'+ newNum +'万';
          }
          else if (num>1000) {
            var newNum = (num/1000).toFixed(1);
            newViewnum = '收听'+ newNum +'千';
          }
          else {
            newViewnum = '收听'+ viewnum;
          }
          console.log(newViewnum);

          jsonData['viewnum'] = newViewnum;
        }

        this.setState({
          dataObject:jsonData,
        })
      })
      .catch((error) => {
        console.log(error);
        alert('失败');
      })
  }

  render() {
    return (
      <View style={styles.container}>
        <View style = {{width:Screen.width, height:Screen.height, flexDirection:'row'}}>
          <ScrollView
            ref = '_scrollView'
            //horizontal = {}
            showsVerticalScrollIndicator = {true}
          >
            {this._scrollviewContentView()}
          </ScrollView>

          <TouchableOpacity
            onPress = {() => this.props.navigation.goBack()}
          >
            <Image
              style = {{width:24, height:35, marginLeft:-(Screen.width-14), marginTop:25,}}
              source = {require('../../img/homeImg/whiteback.png')}
            />
          </TouchableOpacity>

        </View>

        {this._tabBarView()}
      </View>
    );
  }

  _tabBarView = ()=>{
    var tabDataArr = [{title:'read'},{title:'comment'},{title:'read'},{title:'share'},{title:'read'}];
    var tabViewArr = [];
    for (let i = 0; i < tabDataArr.length; i++) {
      tabViewArr.push(
        <View
          style = {{width:Screen.width/5, height:50, marginLeft:i*Screen.width/5, bottom:0, position:'absolute', backgroundColor:'rgb(35,39,42)', alignItems:'center'}}
          key = {i}
        >
          <Image
            style = {{height:49, width:65}}
            source = {{uri:tabDataArr[i].title}}
          />
        </View>
      )
    }
    return tabViewArr;
  }

  _scrollviewContentView(){
    return(
      <View style = {{backgroundColor:'rgb(251,251,251)'}}>
        <View style = {{width:Screen.width, height: 375,}}>
          <Image
            source = {{uri:this.state.dataObject && this.state.dataObject.cover?this.state.dataObject.cover:'null'}}
            style = {{width:Screen.width, height: 375}}
          >

            {/* <TouchableOpacity
              onPress = {() => this.props.navigation.goBack()}
              >
              <Image
                style = {{width:24, height:35, marginLeft:14, marginTop:25,}}
                source = {require('../../img/homeImg/whiteback.png')}
              />
            </TouchableOpacity> */}

          </Image>

          <View
            style = {{flexDirection:'row', justifyContent:'space-between', width:Screen.width, backgroundColor:'transparent', bottom:10, position:'absolute'}}
          >
            <Text
              style = {{color:'white', fontSize:12, marginLeft:10, width:Screen.width/3*2}}
            >
              {this.state.dataObject&&this.state.dataObject.title?this.state.dataObject.title:''}
            </Text>
            <Text
              style = {{color:'white', fontSize:12, marginRight:10}}
            >
              {/* {this.state.dataObject&&this.state.dataObject.viewnum?'收听'+this.state.dataObject.viewnum+'万':''} */}
              {this.state.dataObject&&this.state.dataObject.viewnum?this.state.dataObject.viewnum:''}

            </Text>
          </View>
        </View>
        <View style = {{width:Screen.width, height:80, flexDirection:'row', justifyContent:'space-around', alignItems:'center'}}>
          <Image
            source = {require('../../img/homeImg/pre.png')}
            style = {{width:50, height:50, marginLeft:20}}
          />
          <Image
            source = {require('../../img/homeImg/pause.png')}
            style = {{width:50, height:50}}
          />
          <Image
            source = {require('../../img/homeImg/next.png')}
            style = {{width:50, height:50, marginRight:20}}
          />
        </View>
        <View style = {{width:Screen.width, height:15, justifyContent:'center'}}>
          {/* <Image
            style = {{width:Screen.width, height:3}}
            source = {{uri:'progressBackground'}}
          /> */}
          {/* <Image
            style = {{width:Screen.width, height:6}}
            source = {{uri:'progressCenter'}}
          /> */}
          {/* <Image
            style = {{width:15, height:8}}
            source = {{uri:'progressNode5'}}
          /> */}
        </View>
        <View style = {{width:Screen.width, height:150, flexDirection:'row', alignItems:'center'}}>
          <Image
            source = {{uri:this.state.dataObject&&this.state.dataObject.speaker?this.state.dataObject.speaker.avatar:'null'}}
            style = {{width:60, height:60, borderRadius:30, marginLeft:10}}
          />
          <View style = {{marginLeft:20, width:Screen.width - 100}}>
            <Text
              style = {{fontSize:18, marginBottom:15}}
            >
              {this.state.dataObject&&this.state.dataObject.speak?this.state.dataObject.speak:''}
            </Text>
            <Text
              style = {{color:'rgb(159,159,159)'}}
            >
              {this.state.dataObject&&this.state.dataObject.speaker?this.state.dataObject.speaker.content:''}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width:Screen.width,
    height:Screen.height,
    backgroundColor:'rgb(251,251,251)',
  },
});
